<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>标题 </h3>
			<com></com>
			<box></box>
			<!-- <login></login> -->
			<regist></regist>
			<regist></regist>
			<regist></regist>
			<regist></regist>
			<regist></regist>
			<regist></regist>
			<login-tel></login-tel>
			<login-box></login-box>
		</div>
	<hr />
	<div id="app2">
		<com></com>
		<!-- <box></box> -->
	</div>
	
	
	<template id="t1">
		<div>
			用户名：<input type="text"   /> <br />
			密 码：<input type="password"  /> <br />
			<input type="button" value="注册" />
		</div>
	</template>
	
	<script>
	Vue.directive('focus',{
		inserted(el){
			el.focus()
		}
	})	
	
	//第一种方法
	var Com={
		template:"<div>我是一个组件</div>"
	}
	
	Vue.component('com',Com)	//全局注册
		//定义组件
	var Box={
		template:"<h3><span>我是局部注册的组件</span> </h3>"
	}	
		
		var vm=new Vue({
			el:"#app",
			data:{
				
			},
			components:{
				//注册组件
				box:Box,
				LoginTel:{
					template:"<div><input type='text' v-focus  /> </div>"
				},
				regist:{
					template:"#t1"
				},
				"login-box":{
					template:"<div><h3>组件盒子</h3> </div>"
				}
			}
			
		})
	var vm2=new Vue({
		el:"#app2",
		
	})	
		
	</script>
	<!-- 组件的使用
	1.定义组件:三种方法
	2.注册组件:全局注册，局部注册
	3.使用组件 ：像普通的html标签一样，,名字不能和已有的HTML标签名字重复
	组件有且仅有一个根元素
	 -->
	
<!-- 	

组件的命名规则：
	1.定义组件
	 使用大驼峰的定义方式，如果定义组件和注册组件二合一，名字就会省略
	2. 注册组件
	  大驼峰，小驼峰，中划线都可以 ，中划线必须加上引号
	3. 使用组件
	无论定义的时候是那种方式统统使用中划线的方式，如果没有中划线，使用小写即可 
	-->
	
	</body>
</html>
